<template>
	<view class="home">
		<view class="swiper">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">停电通知</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">核酸通知</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="notice">
			<uni-notice-bar show-icon scrollable color="#2979FF" background-color="#ffffff"
				text="紧急通知！！测试测试测试测试测试测试测试测试..." />

			<!-- <view class="notice-left"><span class="iconfont icon-tixing"></span></view>
			<text id="notice">紧急通知！！测试测试测试测试测试测试测试测试</text> -->
			<navigator @click="notice" hover-class="navigator-hover">
				<span class="iconfont icon-you"></span>
			</navigator>
		</view>
		<view class="utils">
			<view class="utils-item">
				<navigator url="../phoneDooe/phoneDooe" hover-class="navigator-hover">
					<view class="utils-itembox">
						<view class="utils-itembox-icon"><span class="iconfont icon-shoujikaimen"></span></view>
					</view>
				</navigator>
				<text>手机开门</text>
			</view>

			<view class="utils-item">
				<navigator url="../Living/livingpay/livingPayment" hover-class="navigator-hover">
					<view class="utils-itembox">
						<view class="utils-itembox-icon"><span class="iconfont icon-shenghuojiaofei"></span></view>
					</view>
				</navigator>
				<text>生活缴费</text>
			</view>
			<view class="utils-item">
				<navigator url="../maintenancereport/maintenancereport/maintenancereport" hover-class="navigator-hover">
					<view class="utils-itembox">
						<view class="utils-itembox-icon"><span class="iconfont icon-weixiu"></span></view>
					</view>
				</navigator>
				<text>维修上报</text>
			</view>
			<view class="utils-item">
				<navigator url="../visitorInvitation/visitorInvitation" hover-class="navigator-hover">
					<view class="utils-itembox">
						<view class="utils-itembox-icon"><span class="iconfont icon-fangke"></span></view>
					</view>
				</navigator>
				<text>访客邀请</text>
			</view>

		</view>
		<view class="serve">
			<view class="serve-left">
				<h3>便民服务</h3>
				<text>邻里便民服务 全新上线</text>
			</view>
			<view class="serve-right">
				<span class="iconfont icon-biaoqing"></span>
			</view>
		</view>
		<view class="active">
			<view class="active-title">
				<view class="active-title-left">
					<view></view>
					<text>社区活动</text>
				</view>

				<view class="see-all">
					<navigator url="../comActivities/comActivities" hover-class="navigator-hover">
						<text>查看全部</text>
						<span class="iconfont icon-you"></span>
					</navigator>
				</view>
			</view>
			<view class="active-body" v-for="v in activeData" :key="v.id">
				<navigator @click="titleMsg(v.title)" hover-class="navigator-hover">
					<view class="active-body-item">
						<view class="item-box"> <span class="iconfont icon-shequhuodong"></span> </view>
						<view class="item-text">
							<view class="top">
								<text>{{v.title}}</text>
							</view>
							<view class="bottom">
								<text>{{v.author.authorType}} {{v.date}}</text>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from "../../utils/http.js"
	export default {
		data() {
			return {
				activeData: [],
			};
		},
		methods: {
			titleMsg(v) {
				console.log(v)
				uni.navigateTo({
					url: '../articleDetails/articleDetails?title=' + v
				});
			},
			notice() {
				uni.navigateTo({
					url: '../Announcement/DetailsOfTheAnnouncement'
				});
			},
			getData() {
				http({
					url: "/activity/list",
					method: "get",
					params: {
						page: 1,
						limit: 5
					}
				}).then((res) => {
					// console.log(res)
					if (res.code == 0) {
						this.activeData = res.data;
					} else {
						console.log("数据接收失败")
					}

				})

			}

		},
		onLoad() {
			this.getData()
		},
	}
</script>

<style lang="less">
	@import url("../../static/font/iconfont.css");

	.home {
		padding: 40rpx;
		display: flex;
		flex-direction: column;

		.notice,
		.utils,
		.serve,
		.active {
			margin: 20rpx 0;
			border-radius: 8px;
		}

		.swiper {
			border-radius: 8px;
			margin-bottom: 20rpx;
			height: 280rpx;
			box-shadow: 0px 0px 15rpx rgba(0, 0, 0, .2);

			swiper,
			swiper-item,
			.swiper-item {
				width: 100%;
				height: 100%;
				border-radius: 8px;
				background: linear-gradient(90deg, #95e96e 0%,#38f9d7 100%);
			}
		}

		.notice {
			border: 1px solid #e1e1e1;
			height: 98rpx;
			display: flex;
			align-items: center;
			box-shadow: 0px 0px 15rpx rgba(0, 0, 0, .2);
			display: flex;
			align-items: center;
			.uni-noticebar{
				margin: 0;
			}

			.notice-left {
				margin: 0 8px;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background-color: #e6f1ff;
				display: flex;
				justify-content: center;
				align-items: center;

			}

			// #notice {
			// 	width: 520rpx;
			// 	white-space: nowrap;
			// 	overflow: hidden;
			// 	text-overflow: ellipsis;
			// }
		}

		.utils {
			height: 204rpx;
			display: flex;
			justify-content: space-evenly;

			.utils-item {
				width: 140rpx;
				text-align: center;

				.utils-itembox {
					height: 138rpx;
					border: 1px solid #e1e1e1;
					border-radius: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: 0px 0px 15rpx rgba(0, 0, 0, .2);

					.utils-itembox-icon {
						width: 84rpx;
						height: 84rpx;
						background-color: #e6f1ff;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

					}
				}
			}
		}

		.serve {
			height: 204rpx;
			background-color: #ebfbf2;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			box-shadow: 0px 0px 15rpx rgba(0, 0, 0, .2);

			.serve-left {
				display: flex;
				flex-direction: column;

				h3 {
					margin: 10px 0;
					color: #51dc8e;
				}

				text {
					color: #2dbf4b;
				}
			}

			.serve-right {
				width: 138rpx;
				height: 138rpx;
				background-color: #c4f3d9;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

			}
		}

		.active {
			flex: 1;

			.active-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 54rpx;

				.active-title-left {
					display: flex;
					align-items: center;

					view {
						width: 14rpx;
						height: 34rpx;
						background-color: #0068e8;
						margin-right: 10px;
						border-radius: 40%;
					}

					text {
						font-weight: 520;
					}
				}

				.see-all {
					text {
						color: #c8c8c8;
						font-size: 28rpx;
					}

					span {
						background-color: #ffffff;
						color: #c8c8c8;
					}
				}
			}

			.active-body {
				height: 100%;

				.active-body-item {
					border: 1px solid #e1e1e1;
					border-radius: 8px;
					height: 210rpx;
					margin: 20rpx 0;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
					box-shadow: 0px 0px 15rpx rgba(0, 0, 0, .2);

					.item-box {
						width: 226rpx;
						height: 162rpx;
						background-color: #e6f1ff;
						border-radius: 8px;
						margin: 0 10px;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.item-text {
						flex: 1;

						.top {
							margin-bottom: 8px;
						}

						.bottom {
							font-size: 24rpx;
							color: #b8b8b8;
						}
					}
				}
			}
		}
	}
</style>
